<template>
    <div class="task-box">
        <el-input ref="userName" name="userName" autocomplete="off" placeholder="请输入搜索内容" v-model="caseQuery.searchKey">
            <el-button slot="append" icon="el-icon-search"
                @click="activeName === 'penging' ? getMycaseList() : todoCaseList()"></el-button>
        </el-input>
        <div class="task-num">当日系统分配案件数: {{ zdnumber }}</div>
        <div class="task-num">当日修理厂指定案件数: {{ zpnumber }}</div>
        <el-tabs class="test" :stretch="true" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待处理案件" name="penging"></el-tab-pane>
            <el-tab-pane label="增补案件" name="supplement"></el-tab-pane>
        </el-tabs>
        <ul class="task-case-list scroll-case-list" v-loading="caseLoading" element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading">
            <li class="task-item" v-for="caseItem in caseList" :key="caseItem.taskId" @click="showCasedialog(caseItem)">
                <p> {{ caseItem.carNumber }} / {{ caseItem.caseNumber }}</p>
                <p>{{ caseItem.userName }}</p>
                <p>{{ caseItem.estimateMoney ? caseItem.estimateMoney : '未填' }} 元</p>
                <p>{{ caseItem.distributeTime }}</p>
            </li>
            <el-empty description="暂无数据" v-if="caseList.length <= 0"></el-empty>
        </ul>
        <case-detail ref="caseDetail" />
    </div>
</template>
<script>
import caseDetail from './caseDetails.vue'
import { mapState } from 'vuex'
import { myCaseList, todoCaseList } from '@/api/case'

export default {
    components: { caseDetail },
    data() {
        return {
            activeName: 'penging',
            caseQuery: {
                seatUserId: '',
                searchKey: '',
                pageNum: '1',
                pageCount: '999'
            },
            zdnumber: 0,
            zpnumber: 0,
            caseList: [],
            caseLoading: false
        }
    },
    created() {
        this.caseQuery.seatUserId = this.userInfo.userId
        this.getMycaseList();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo,
        })
    },
    methods: {
        getMycaseList() {
            this.caseLoading = true;
            myCaseList(this.caseQuery).then(res => {
                this.caseLoading = false;
                this.caseList = res.sumPage ? res.caseList : [];
                this.zdnumber = res.zdnumber
                this.zpnumber = res.zpnumber
            })
        },
        todoCaseList() {
            this.caseLoading = true;
            todoCaseList(this.caseQuery).then(res => {
                this.caseLoading = false;
                this.caseList = res.sumPage ? res.caseList : [];
            })
        },
        handleClick(tab) {
            if (tab.name === "penging") {
                this.getMycaseList();
            } else {
                this.todoCaseList();
            }
        },
        showCasedialog(item) {
            this.$nextTick(() => {
                this.$refs.caseDetail.getCaseInfo(item);
            })
        }
    },
}
</script>
<style lang='scss' scoped>
.task-box {
    height: calc(100% - 120px);

    .el-input {
        margin-top: 10px;

        ::v-deep input {
            height: 35px;
        }
    }

    .task-num {
        width: 100%;
        font-size: 14px;
        border: solid 1px #ccc;
        padding: 6px 12px;
        margin-top: 8px;
    }

    .el-tabs {
        margin-top: 5px;

        ::v-deep .el-tabs__nav-wrap::after {
            height: 0;
        }

        ::v-deep .el-tabs__active-bar {
            width: 70px !important;
            left: 40px;
            font-weight: bold;
            background-color: var(--theme-shadow-color);
        }

        ::v-deep .el-tabs__item {
            font-weight: bold;
            color: #000;
        }

    }

    .task-case-list {
        height: calc(100% - 200px);
        overflow: auto;

        .task-item {
            padding-bottom: 10px;
            border-bottom: 1px solid #ccc;
            font-size: 14px;
            text-indent: 2px;

            p {
                margin: 8px 0;
            }
        }
    }
}

::v-deep .case-dialog {
    min-width: 1200px;
}

// ::v-deep .el-dialog .el-dialog__body {
//     max-height: 80vh;
//     padding: 10px 0;
//     overflow: hidden;
// }</style>
